<template>
  <div class="songsList">
    <el-card v-for="(item,i) in songsList" :key="i">
      <div class="df">
        <div class="tracks_index">{{i+1}}</div>
        <div>
          <div class="card-header">{{item.name}}</div>
          <p v-if="item.ar"><span v-for="(artist,it) in item.ar" :key="it">{{artist.name+'  '}}</span>---{{item.al.name}}</p>
          <p v-if="item.artists"><span v-for="(artist,it) in item.artists" :key="it">{{artist.name+'  '}}</span>---{{item.album.name}}</p>
        </div>
      </div>
      <i class="el-icon-video-play" @click="AddOneToPlayer(item)"></i>
      <el-popover placement="bottom-start" width="230" trigger="click" @click.native="isLikeState(item.id)">
        <el-row class="list" v-for="(artist,i) in item.ar" @click.native="ToArtist(artist.id)" :key="i">
          <i class="artist_icon"></i>歌手:{{artist.name}}</el-row>
        <el-row class="list" @click.native="addMusicLike(item.id)">
          <span v-if="!isLike"><i class="like_icon"></i>添加至喜欢</span>
          <span v-else><i class="likeLight_icon"></i>已喜欢</span>
        </el-row>
        <i slot="reference" class="el-icon-more"></i>
      </el-popover>
    </el-card>
    <Player :showPlayer="showPlayer"></Player>
  </div>

</template>

<script>
import {mapState} from "vuex";
import Player from "./player";

export default {
name: "SongsList",
  components: {Player},
  props:{
  songsList:{required:true,}
  },
  computed:{
    ...mapState({
      isLike:state=>state.music.isLike,
      showPlayer:state=>state.audioMusic.showPlayer
    })
  },
  methods:{
    AddOneToPlayer(item){
      this.$store.dispatch('audioMusic/AddOneToPlayer',item)
    },
    addMusicLike(mid){
      this.$store.dispatch('music/musAddLike',{musicid:mid,
        uid:window.localStorage.getItem('id'),
        type:2})
    },
    isLikeState(mid){
      this.$store.dispatch('music/musFav',{musicid:mid,
        uid:window.localStorage.getItem('id'),
        type:2})
    },
    ToArtist(Aid){
this.$router.push('/artistDetail/'+Aid)
      window.location.reload()
    }
  }
}
</script>

<style scoped lang="less">
.songsList{
  padding-bottom: 100px;
  .el-card{
    position: relative;
    .df{
      display: flex;
      align-items: center;
    }
    .el-icon-video-play{
      font-size: 35px;
      position: absolute;
      right: 80px;
      top: 25px;
    }
    .el-icon-more{
      font-size: 35px;
      position: absolute;
      right: 25px;
      top: 25px;
    }
    .tracks_index{
      font-size: 30px;
      margin-right: 20px;
    }
    p{
      margin:10px 0 0;
      opacity: 0.5;
    }
  }
}

</style>
